<template>
    <div class="scene-wrap">
        <!-- 模板 -->
        <div class="template-wrap">
            <div class="main-template-header">
                <!-- <div class="title">新建大屏</div> -->
                <div class="main-search">
                    <el-input prefix-icon="el-icon-search" size="small" placeholder="请输入关键字查询" clearable v-model.trim="projectName" @keyup.enter.native="getProjectList(projectName)"></el-input>
                </div>
            </div>
        </div>
        <div class="template-content">
            <div class="template-content-head">
                <div class="creat-new" @click="createProject('1')">
                    <div class="creat-l">
                        <img src="../../image/scene/icon_creat_acp.svg" />
                        <div>
                            <div class="creat-name">新建固定布局项目</div>
                            <div class="creat-name">设计和原型</div>
                        </div>
                    </div>
                    <div class="create-r">
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
                <div class="creat-new" @click="createProject('3')">
                    <div class="creat-l">
                        <img src="../../image/scene/icon_creat_acp.svg" />
                        <div>
                            <div class="creat-name">新建自适应项目</div>
                            <div class="creat-name">设计和原型</div>
                        </div>
                    </div>
                    <div class="create-r">
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
                <el-upload :auto-upload="false" accept=".zip" ref="upload" action="#" :show-file-list="false" :on-change="(file, fileList) => {uploadChange(file)}">
                    <div class="creat-new">
                        <div class="creat-l">
                            <img src="../../image/scene/icon_creat_acp.svg" />
                            <div>
                                <div class="creat-name">导入本地文件</div>
                                <div class="creat-name">设计和原型</div>
                            </div>
                        </div>
                        <div class="create-r">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </el-upload>
                <!-- <div class="creat-new" v-for="(item, index) in templateList" :key="index" @click="editProject(item, '1')">
                    <div class="creat-img">
                        <img :src="getPreview(item.preview)" />
                    </div>
                    <div class="creat-name">{{  item.name  }}</div>
                </div> -->
            </div>
            <div class="project-templete" v-if="templateList.length">
                <div class="project-templete-t">
                    <p class="template-content-title">从模板开始</p>
                    <p class="project-templete-t-more" @click="jumpTemplete">查看全部模板<i class="el-icon-arrow-right"></i></p>
                </div>
                <div class="project-templete-b">
                    <div class="main-single-peoject" v-for="(item, index) in templateList" :key="index" @click="editProject(item, '1')">
                        <div class="thumb">
                            <img :src="getPreview(item.preview)" :alt="item.name" />
                        </div>
                        <div class="deacribe">
                            <div class="name">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <p class="template-content-title">我的大屏</p>
            <div class="project-content">
                <div class="single-peoject" v-for="(item, index) in projectList" :key="index" @click="editProject(item, '2')" @mouseover="showButton(item)" @mouseleave="hideButton(item)">
                    <div class="thumb">
                        <img :src="getPreview(item.preview)" alt="item.name" />
                    </div>
                    <div class="deacribe">
                        <div class="name">{{  item.name  }}</div>
                        <div class="time">{{  item.createtime  }}</div>
                    </div>
                    <div class="handle" :id="'btn' + item.id">
                        <div class="edit-btn" @click.stop="editProject(item, '2')">
                            编辑
                        </div>
                        <div class="handle-btns">
                            <img src="../../image/main/template_preview.svg" :style="user.getPanel() === 'true' ? 'opacity: 0.6' : ''" @click.stop="previewProject(item)" title="查看" />
                            <img src="../../image/main/template_copy.svg" @click.stop="copyProject(item)" title="复制" />
                            <!-- <img src="../../image/main/template_share.svg" @click.stop="shareEvent(item)" title="分享" v-if="user.getPanel() !== 'true'" /> -->
                            <img src="../../image/main/template_delete.svg" @click.stop="removeProject(item)" title="删除" />
                            <img src="../../image/main//toolbar/icon_download.svg" :style="user.getPanel() === 'true' ? 'opacity: 0.6' : ''" @click.stop="downloadProject(item)" title="下载" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 工程 -->
        <!-- <div class="template-wrap"> -->
            <!-- <div class="template-header">
                <div class="title">我的项目（{{  projectList.length  }}个）</div>
                <div class="template-project">
                    <div class="search" v-if="user.getPanel() !== 'true'">
                        <el-input size="small" placeholder="请输入关键字查询" clearable v-model.trim="projectName" @keyup.enter.native="getProjectList(projectName)">
                            <el-button slot="append" icon="el-icon-search" @click="getProjectList(projectName)"></el-button>
                        </el-input>
                    </div>
                    <el-upload :auto-upload="false" accept=".zip" ref="upload" action="#" :show-file-list="false" :on-change="(file, fileList) => {uploadChange(file)}">
                        <el-button slot="trigger" size="small" type="primary">上传项目</el-button>
                    </el-upload>
                </div>
            </div> -->
        <!-- </div> -->
        <!-- 分享组件 -->
        <el-dialog title="添加分享" :visible.sync="shareVisible" width="600px" top="35vh" class="share-dialog">
            <el-form :model="shareForm" :rules="rules" ref="shareForm" label-width="100px">
                <el-form-item label="分享名称" prop="name">
                    <el-input v-model="shareForm.name"></el-input>
                </el-form-item>
                <el-form-item label="过期时间" prop="expiretime">
                    <el-date-picker v-model="shareForm.expiretime" type="datetime" placeholder="选择日期时间" default-time="12:00:00" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer share-footer">
                <el-button @click="resetForm('shareForm')">取 消</el-button>
                <el-button type="primary" @click="shareProject('shareForm')">分 享</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/js/util/url.js';
import PATH from '@/js/util/path.js';
import user from '@/js/util/user.js';
import config from '@/js/util/config.js';
import message from '@/js/util/message.js';
import icon_default from '@/image/scene/icon_default.svg';
import scene from '@/js/main/scene.js';
import upload from '@/js/util/upload.js';

export default {
    data() {
        return {
            templateName: '',
            projectName: '',
            templateList: [],
            projectList: [],
            shareVisible: false,
            shareItem: null,
            shareForm: {
                name: '',
                expiretime: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入分享名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                expiretime: [{ required: true, message: '请选择日期和时间', trigger: 'change' }]
            },
            user: user
        };
    },
    mounted() {
        scene.setID(null);
        this.getTemplateList();
        this.getProjectList();
    },
    methods: {
        showButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'block';
        },
        hideButton(item) {
            document.getElementById(`btn${item.id}`).style.display = 'none';
        },
        previewProject(item) {
            if (user.getPanel() !== 'true') {
                let router = this.$router.resolve({ path: PATH.VIEWER, query: { id: item.id, token: user.getToken() } });
                window.open(router.href, '_serf');
            }
        },
        copyProject(item) {
            let param = {
                token: user.getToken(),
                id: item.id
            };
            let result = request.getTemplate(param);
            if (result.state.code === 10000) {
                let copyParam = {
                    id: result.body.message.id,
                    name: result.body.message.name + '_副本',
                    token: user.getToken()
                };
                let copyResult = request.copyTemplate(copyParam);
                if (copyResult.state.code === 10000) {
                    message.message('复制成功', 'success');
                    this.getProjectList();
                } else {
                    message.message(result.data.body.message, 'error');
                }
            }
        },
        removeProject(item) {
            let _this = this;
            message.confirm(
                '确定删除该项目么？',
                '',
                function() {
                    let param = {
                        token: user.getToken(),
                        id: item.id
                    };
                    let result = request.deleteTemplate(param);
                    if (result.state.code === 10000) {
                        message.message('删除成功', 'success');
                        _this.getProjectList();
                    } else {
                        message.message(result.data.body.message, 'error');
                    }
                },
                function() {
                    message.message('已取消删除', 'info');
                }
            );
        },
        downloadProject(item) {
            if (user.getPanel() !== 'true') {
                window.open(`${request.downloadProject}?token=${user.getToken()}&id=${item.id}`);
            }
        },
        uploadChange(file) {
            let _this = this;
            let attribute = {
                name: file.name,
                chartset: 'GBK'
            };
            let successFun = function(fileUp) {
                _this.getProjectList();
            }
            upload.addFile(file.raw, 4, JSON.stringify(attribute), successFun);
        },
        editProject(item, model) {
            scene.setID(item.id);
            this.$router.push({ path: PATH.HOME, query: { layout: item.layout, model: model } });
            if (user.getPanel() === 'true') {
                this.$store.dispatch('setChartsParams', { layout: item.layout, model: model, id: item.id });
            }
        },
        createProject(layout) {
            this.$router.push({
                path: PATH.HOME,
                query: {
                    layout: layout
                }
            });
            if (user.getPanel() === 'true') {
                this.$store.dispatch('setChartsParams', { layout: layout });
            }
        },
        getPreview(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : icon_default;
        },
        getProjectList(data) {
            let listParam = {
                name: data,
                token: user.getToken()
            };
            let result = request.getTemplateList(listParam);
            this.projectList = [];
            if (result.state.code == 10000 && result.body.message.list) {
                this.projectList = result.body.message.list;
            } else if (result.state.code == 10004) {
                // this.$router.push(PATH.LOGINLIC);
            }
        },
        getTemplateList(data) {
            let templateParam = {
                name: data,
                token: null
            };
            let result = request.getTemplateList(templateParam);
            this.templateList = [];
            if (result.state.code == 10000 && result.body.message.list) {
                this.templateList = result.body.message.list;
            } else if (result.state.code == 10004) {
                // this.$router.push(PATH.LOGINLIC);
            }
        },
        shareEvent(data) {
            this.shareVisible = true;
            this.shareItem = data;
        },
        shareProject(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let param = {
                        token: user.getToken(),
                        layerid: this.shareItem.id,
                        name: this.shareForm.name,
                        expiretime: this.shareForm.expiretime
                    };
                    let result = request.addShare(param);
                    if (result.state.code === 10000) {
                        message.message('分享成功', 'success');
                        this.shareVisible = false;
                        this.resetForm('shareForm');
                    } else {
                        message.message(result.data.body.message, 'error');
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.shareVisible = false;
            this.$refs[formName].resetFields();
        },
        jumpTemplete() {
            this.$router.push({
                path: PATH.TEMPLETE
            });
        }
    }
};
</script>

<style lang='scss' scoped>
.scene-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.template-wrap {
    // height: 45%;
}
.template-project {
    display: flex;
    align-items: center;
}
.template-content {
    overflow: auto;
    height: calc(100% - 75px);
}
.template-content-head {
    display: flex;
    // flex-wrap: wrap;
    // align-content: flex-start;
    // overflow-y: auto;
    // height: calc(100% - 30px);
    margin-bottom: 40px;
    .creat-new {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 300px;
        height: 86px;
        background: #222222;
        border-radius: 4px;
        border: 1px solid #9ad1d812;
        cursor: pointer;
        margin-right: 20px;
        padding: 10px;
        &:hover {
            border: 1px solid #1e68cf;
        }
        .creat-l {
            display: flex;
            align-items: center;
            > img {
                width: 54px;
                height: 54px;
            }
        }
        .creat-name {
            font-size: 12px;
            color: #ffffff;
            font-weight: 700;
            margin: 5px 0;
            text-align: left;
        }
        .create-r {
            > i {
                color: #ffffff;
                font-size: 20px;
                font-weight: 700;
            }
        }
    }
}
.template-content-title {
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}
.project-templete {
    background: #222222;
    margin-bottom: 10px;
    .template-content-title {
        margin-bottom: 0;
    }
    .project-templete-t-more {
        font-size: 16px;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
        .el-icon-arrow-right {
            margin-left: 10px;
        }
    }
    &-t {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    &-b {
        height: 220px;
        display: grid;
        grid-gap: 20px;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, 260px);
        overflow: hidden;
    }
}

.project-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // overflow-y: auto;
    // height: calc(100%);
}

.share-dialog {
    ::v-deep .el-input__inner {
        color: #05090c !important;
    }
}
</style>
<style lang='scss'>
.el-picker-panel__footer {
    background: transparent;
}
.el-picker-panel {
    .el-input__inner {
        color: $FontGray;
        background: transparent;
    }
}
</style>